<script setup lang="ts">
import { ref, reactive } from 'vue'

defineProps<{ msg: string }>()

interface Params {
  name: string;
  desc: string;
}

interface Item extends Params {
  id: number;
}

const list = ref<Item[]>([]);
const params = reactive<Params>({
  name: '',
  desc: '',
});
const add=() => {
   list.value.push({
    id:list.value.length,
    name: params.name,
    desc: params.desc
    })
}
function del(id:number) {
  const index = list.value.findIndex((item) => item.id === id)
  list.value.splice(index, 1)
}
</script>

<template>
  <div>
    名字：<input type="text" v-model="params.name">
    描述<input type="text" v-model="params.desc">
    <button @click="add">提交</button>
  </div>
  <div class="box" v-for="item in list" :key="item.id">
    <span>
      {{item.name}}
      {{item.desc}}
    </span>
    <button @click="del(item.id)">删除</button>
  </div>
</template>

<style scoped>
</style>
